/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
 <div class="pro-content">
    <div class="header">
      <div class="title-box">
        <p class="title">伍家岗智慧征收数据管理平台</p>
        <p class="sub-title">{{proInfo.title}}</p>
      </div>
      <div class="back" @click="goHome">
        <i class="iconfont icon-guidangxiangmu"></i>
      </div>
      <div class="users">
        管理员
        <img src="../../assets/img/head.png" alt="">
      </div>
    </div>
    <div class="main">
      <div class="left"></div>
      <div class="middle">
        <div class="map" id="pro-map"></div>
      </div>
      <div class="right"></div>
    </div>
</div>
</template>

<script>
import config from "../../utils/config.js";

export default {
  data() {
    return {
      proInfo: {}
    };
  },
  methods: {
    goHome() {
      this.$router.push({ path: "/home" });
    }
  },
  components: {},
  mounted() {
    this.proInfo = this.$route.query;
    var map = new AMap.Map("pro-map", {
      mapStyle: "amap://styles/549409facc090ed9eeb9f75cbd30489e",
      resizeEnable: true,
      center: [111.360956, 30.644215],
      zoom: 17
    });
    //区域高清瓦片定义
    var tilerLayer = new AMap.TileLayer({
      zIndex: 10,
      getTileUrl: function(x, y, z) {
        return "http://bi.n3.cn/maptiler/1/" + z + "/" + x + "/" + y + ".png";
      }
    });

    //加载区域高清瓦片
    tilerLayer.setMap(map);
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";

.pro-content {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    height: 80px;
    width: 100%;
    background: @primary;
    z-index: 100;
    text-align: center;
    .title-box {
      float: left;
      font-weight: bold;
      color: #fff;
      width: 50%;
      padding: 10px 20px;
      p {
        text-align: left;
        font-weight: bold;
      }
      .title {
        line-height: 35px;
        font-size: 30px;
        display: block;
      }
      .sub-title {
        font-size: 20px;
        line-height: 25px;
      }
    }
    .users {
      margin-right: 10px;
    }
    .back {
      float: right;
      line-height: 80px;
      height: 80px;
      color: #fff;
      margin-right: 10px;
      i {
        font-size: 30px;
      }
    }
  }
  .main {
    width: 100%;
    height: calc(~"100% - 80px");
    position: relative;
    overflow: hidden;
    .left,
    .middle,
    .right {
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
    }
    .left,
    .right {
      width: 250px;
    }
    .middle {
      width: calc(~"100% - 500px");
      .map {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
